// 首页换成POS这个页面
<template>
  <div class="pos">
    <el-row>
      <!-- 订单栏 -->
      <el-col :span="7" class="pos-order" id="order-list"><!--占7个跨度-->
        <el-tabs>
          <!--label里面写标签名称-->
          <el-tab-pane label="点餐">
            <!--这是表格了,加个边框，:data引入后端数据-->
            <el-table :data="tableData" border style="width:100%">
              <!--列，prop是要读取的数据的属性,和后台数据名称对应上-->
              <el-table-column prop="goodsName" label="商品名称"></el-table-column>
              <el-table-column prop="count" label="数量" width="50"></el-table-column>
              <el-table-column prop="price" label="金额" width="70"></el-table-column>
              <!--fixed固定在右侧不变化-->
              <el-table-column label="操作" width="100" fixed="right">
                <template scope="scope">
                  <!-- 一个没有边框的按钮，小号的 -->
                  <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                  <!--scope.row相当于把该行数据传入的方法中-->
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="totalDiv">
              <small>数量：</small>{{totalCount}}&nbsp;&nbsp;&nbsp;&nbsp;<small>金额：</small>{{totalMoney}}元
            </div>
            <div class="div-btn">
              <el-button type="warning">挂单</el-button>  
              <el-button type="danger" @click="delAllGoods()">删除</el-button>
              <el-button type="success">结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="挂单"> 
            挂单
          </el-tab-pane>
          <el-tab-pane label="外卖">
            外卖 
          </el-tab-pane>
        </el-tabs>
      </el-col>

      <el-col :span="17">
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="often-goods-list"><!--表单-->
            <ul class="often-good">
              <li v-for="goods in offenGoods" @click="addOrderList(goods)">
                <span>{{goods.goodsName}}</span>
                <span class="o-price">￥{{goods.price}}元</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <div>
                <ul class='cookList'>
                    <li v-for="goods in type0Goods" @click="addOrderList(goods)">
                        <span class="foodImg"><img src="goods.goodsImg" width="100%"></span>
                        <span class="foodName">{{goods.goodsName}}</span>
                        <span class="foodPrice">￥{{goods.price}}元</span>
                    </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小食">
              <div>
                <ul class='cookList'>
                    <li v-for="goods in type1Goods" @click="addOrderList(goods)">
                        <span class="foodImg"><img src="goods.goodsImg" width="100%"></span>
                        <span class="foodName">{{goods.goodsName}}</span>
                        <span class="foodPrice">￥{{goods.price}}元</span>
                    </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="饮料">
              <div>
                <ul class='cookList'>
                    <li v-for="goods in type2Goods" @click="addOrderList(goods)">
                        <span class="foodImg"><img src="goods.goodsImg" width="100%"></span>
                        <span class="foodName">{{goods.goodsName}}</span>
                        <span class="foodPrice">￥{{goods.price}}元</span>
                    </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <div>
                <ul class='cookList'>
                    <li v-for="goods in type3Goods" @click="addOrderList(goods)">
                        <span class="foodImg"><img src="goods.goodsImg" width="100%"></span>
                        <span class="foodName">{{goods.goodsName}}</span>
                        <span class="foodPrice">￥{{goods.price}}元</span>
                    </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "pos",
  data() {
    return {
      tableData: [],
      offenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalMoney: 0,
      totalCount: 0
    };
  },
  created: function() {
    axios
      .get("http://jspang.com/DemoApi/oftenGoods.php")
      .then(response => {
        //说明成功了
        this.offenGoods = response.data;
      })
      .catch(error => {
        //说明没成功
        alert("网络出错了");
      });

    axios
      .get("http://jspang.com/DemoApi/typeGoods.php")
      .then(response => {
        //说明成功了
        this.type0Goods = response.data[0];
        this.type1Goods = response.data[1];
        this.type2Goods = response.data[2];
        this.type3Goods = response.data[3];
      })
      .catch(error => {
        //说明没成功
        alert("网络出错了");
      });
  },
  mounted: function() {
    // 在DOM都加载之后再执行
    var orderHeight = document.body.clientHeight; // 获得整体页面高度
    // 将整体页面高度赋值给订单栏
    document.getElementById("order-list").style.height = orderHeight + "px";
  },
  methods: {
    addOrderList(goods) {
      //计数清零
      this.totalMoney = 0;
      this.totalCount = 0;

      //商品是否已经存在于订单列表中
      let isHave = false;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodsId == goods.goodsId) {
          isHave = true;
        }
      }
      //根据判断的值编写业务逻辑
      if (isHave) {
        //改变列表中商品数量
        let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
        arr[0].count++;
      } else {
        //构造左侧列表中的商品列表goodsList
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        };
        //压入到list中
        this.tableData.push(newGoods);
      }
      this.getAllMoneyNum();
    },
    //删除单个商品
    delSingleGoods(goods) {
      //过滤id不相同的存起来，相同的删掉了
      this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId);
      this.getAllMoneyNum();
    },
    //删除全部商品
    delAllGoods(){
      this.tableData=[];
      this.totalMoney = 0;
      this.totalCount = 0;
    },
    //计算汇总，金额和数量
    getAllMoneyNum() {
      this.totalCount = 0;
      this.totalMoney = 0;
      if (this.tableData) {
        //数组必须有值才汇总
        this.tableData.forEach(element => {
          //element相当于list中每个元素
          this.totalCount += element.count;
          this.totalMoney = this.totalMoney + element.price * element.count;
        });
      }
    }
  }
};
</script>

<style scoped>
.pos-order {
  background-color: #f9fafc;
  border-right: 1px solid #c0ccda; /*设置侧边框，并给出背景色*/
}
.div-btn {
  margin-top: 10px; /*设置按钮间间隔*/
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px; /*内边距*/
  text-align: left; /*显示在左边*/
}
.often-goods-list ul li {
  /*针对表单下的li进行布局*/
  list-style: none; /*把li默认的点点去掉*/
  float: left;
  border: 1px solid #e5e9f2;
  padding: 10px;
  margin: 10px; /*外边距*/
  background-color: #fff;
}
.o-price {
  color: #58b7ff;
}
.goods-type {
  /*清除浮动,让这个div到上一个div的下面，而不是右边*/
  clear: both;
}
.cookList li {
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auot;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
  cursor: pointer;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 16px;
  padding-left: 10px;
  color: brown;
}
.often-good {
  cursor: pointer;
}
.totalDiv {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #d3dce6;
}
</style>
